<template>
	<view class="off_port">
		<uni-nav-bar title="下班汇报"  :statusBar="true" leftIcon="closeempty" rightText="草稿箱" @clickLeft="back"></uni-nav-bar>
		<view class="work_head flex_row al_center">
			<view class="flex_col flex_1 al_center">
				<view class="flex_col head_item">
					<text>我的工作</text>
					<text>司机</text>
				</view>
			</view>
			<view class="head_line"></view>
			<view class="flex_col flex_1 al_center">
				<view class="flex_col head_item">
					<text>汇报时间</text>
					<text>2020-05-06 12:00</text>
				</view>
			</view>
		</view>
		<view class="full_width pd_bt_20 pd_tp_30">
			<text class="status_txt">工作量</text>
		</view>
		
		<view class="report_list flex_col al_center">
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name form_lable">车牌号</text>
				<input type="text" v-model="plateNumber" class="flex_1 report_input" placeholder="请输入车牌号"/>
			</view>
			<view class="report_item flex_row al_center">
				<text class="report_name form_lable">路段</text>
				<input type="text" v-model="section" class="flex_1 report_input" placeholder="请输入路段"/>
			</view>
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">类别</text>
				<view class="flex_row al_center">
					<picker mode="selector" :range="categorys" range-key="text" @change="selectCate">
						<text v-if="category" class="selected_time">{{category}}</text>
						<text v-else class="report_value">请选择</text>
					</picker>
					
					<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
				</view>
			</view>
			
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name form_lable">小计量(吨)</text>
				<!-- <view class="flex_row al_center">
					<text class="report_value">请选择</text>
					<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
				</view> -->
				<input type="text" v-model="calculate" class="flex_1 report_input" placeholder="请输入"/>
			</view>
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name form_lable">加油时间</text>
				<input type="text" v-model="refuelingTime" class="flex_1 report_input" placeholder="请输入"/>
				<!-- <view class="flex_row al_center">
					<text class="report_value">请选择</text>
					<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
				</view> -->
			</view>
			<view class="report_item flex_row al_center">
				<text class="report_name form_lable">加油量(L)</text>
				<input type="text" v-model="quantity" class="flex_1 report_input" placeholder="请输入"/>
			</view>
		</view>
		<block v-for="(item,ind) in taskList" :key="ind">
			<view class="full_width pd_bt_20 pd_tp_30 flex_row just_space_between">
				<text class="status_txt">次数{{ind+1}}</text>
				<text class="delete_status_txt" @tap="deleteTimes(ind)">删除</text>
			</view>
			<view class="report_list flex_col al_center">
				<view class="report_item flex_row al_center">
					<text class="report_name form_lable">时间</text>
					<view class="flex_1 flex_row al_center">
						<!-- <input type="text" class="input_time flex_1" placeholder="开始时间"/> -->
						<picker class="time_picker" mode="time" @change="changesTime($event,ind)">
							<text class="selected_time" v-if="item.startTime">{{item.startTime}}</text>
							<text class="time_label" v-else>开始时间</text>
						</picker>
						
						<view class="flex_row just_center">
							<view class="space_line"></view>
						</view>
						<!-- changeEtime -->
						<picker class="time_picker" mode="time" @change="changeEtime($event,ind)">
							<text class="selected_time" v-if="item.endTime">{{item.endTime}}</text>
							<text class="time_label" v-else>结束时间</text>
						</picker>
					</view>
				</view>
				
				<view class="report_item flex_row al_center">
					<text class="report_name form_lable">公里数(km)</text>
					<view class="flex_1 flex_row al_center">
						<input type="number" v-model="item.startKm" class="input_time flex_1" placeholder="起始公里数"/>
						<view class="flex_row just_center mg_lt_20 mg_rt_20">
							<view class="space_line"></view>
						</view>
						<input type="number" v-model="item.barrels" class="input_time flex_1" placeholder="结束公里数"/>
					</view>
				</view>
				
				<view class="report_item flex_row al_center">
					<text class="report_name form_lable">桶数</text>
					<input v-model="item.endKm" type="number" class="flex_1 report_input" placeholder="请输入"/>
				</view>
				<view class="report_item flex_row al_center">
					<text class="report_name form_lable">量</text>
					<input type="text" v-model="item.amount"  class="flex_1 report_input" placeholder="请输入"/>
				</view>
			</view>
		</block>
		
		
		<view class="add_times mg_tp_30 flex_row al_center" @tap="addTimes">
			<uni-icons type="plusempty" class="mg_lt_30" color="#345AD4"></uni-icons>
			<text class="add_times_txt">添加次数</text>
		</view>
		
		<block  v-for="(nitem,xindex) in violations" :key="xindex+4">
			<view class="full_width pd_bt_20 pd_tp_30 flex_row just_space_between">
				<text class="status_txt">违规次数{{xindex+1}}</text>
				<text class="delete_status_txt" @tap="deleteviolations(xindex)">删除</text>
			</view>
			<view class="report_list flex_col al_center">
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">交通违规项目</text>
					<view class="flex_row al_center">
						<picker mode="selector" :range="traffRules" range-key="text" @change="changeVal($event,'illegalItems',0,xindex)">
							<text class="selected_time">{{nitem.illegalItems}}</text>
						</picker>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</view>
				</view>
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">次数</text>
					<view class="flex_row al_center">
						<picker mode="selector" :range="numList1" range-key="num" @change="changeVal($event,'frequency',1,xindex)">
							<text class="selected_time">{{nitem.frequency}} </text>
						</picker>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</view>
				</view>
				<view class="report_item flex_row just_space_between al_center">
					<text class="report_name">扣分</text>
					<view class="flex_row al_center">
						<picker mode="selector" :range="numList2" range-key="num" @change="changeVal($event,'branch',2,xindex)">
							<text class="selected_time">{{nitem.branch}}</text>
						</picker>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</view>
				</view>
			</view>
		</block>
		
		
		
		
		<view class="add_times mg_tp_20 flex_row al_center" @tap="addVoTimes">
			<uni-icons type="plusempty" class="mg_lt_30" color="#345AD4"></uni-icons>
			<text class="add_times_txt">添加违规次数</text>
		</view>
		<view class="report_list flex_col al_center mg_tp_20">
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">轮胎气压</text>
				<view class="flex_row al_center">
					<picker mode="selector"  :range="engineOptions" range-key="text" @change="changenormal($event,0)">
						<text class="report_value" :style="{color:'#333'}">{{pressure}}</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">发动机</text>
				<view class="flex_row al_center">
					<picker mode="selector"  :range="engineOptions" range-key="text" @change="changenormal($event,1)">
						<text class="report_value" :style="{color:'#333'}">{{engine}}</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">车门</text>
				<view class="flex_row al_center">
					<picker mode="selector"  :range="cardoorOptions" range-key="text" @change="changeCardoor">
						<text class="report_value" :style="{color:'#333'}">{{cardoor}}</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">水箱</text>
				<view class="flex_row al_center">
					<picker mode="selector"  :range="engineOptions" range-key="text" @change="changenormal($event,2)">
						<text class="report_value" :style="{color:'#333'}">{{waterTank}}</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">机油</text>
				<view class="flex_row al_center">
					<picker mode="selector"  :range="engineOptions" range-key="text" @change="changenormal($event,3)">
						<text class="report_value" :style="{color:'#333'}">{{engineOil}}</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">刹车与制动</text>
				<view class="flex_row al_center">
					<picker mode="selector"  :range="engineOptions" range-key="text" @change="changenormal($event,4)">
						<text class="report_value" :style="{color:'#333'}">{{brake}}</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="full_width pd_bt_20 pd_tp_30">
			<text class="status_txt">质量</text>
		</view>
		
		<view class="report_list flex_col al_center mg_tp_20">
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">垃圾满漏</text>
				<view class="flex_row al_center">
					<!-- <text class="report_value">请选择</text>
					<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons> -->
					<picker mode="selector"  :range="thereany" range-key="text" @change="changeHave($event,4)">
						<text class="report_value" :style="{color:'#333'}">{{rubbishfull}}</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</picker>
				</view>
			</view>
			
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">垃圾暴露</text>
				<view class="flex_row al_center">
					<picker mode="selector"  :range="thereany" range-key="text" @change="changeHave($event,0)">
						<text class="report_value" :style="{color:'#333'}">{{rubbish}}</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</picker>
				</view>
			</view>
			
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">跑冒滴漏</text>
				<view class="flex_row al_center">
					<picker mode="selector"  :range="thereany" range-key="text" @change="changeHave($event,1)">
						<text class="report_value" :style="{color:'#333'}">{{taxevasion}}</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</picker>
				</view>
			</view>
			
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">日清日运</text>
				<view class="flex_row al_center">
					<picker mode="selector"  :range="thereany" range-key="text" @change="changeHave($event,2)">
						<text class="report_value" :style="{color:'#333'}">{{dailytransportation}}</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</picker>
				</view>
			</view>
			
			<view class="report_item flex_row just_space_between al_center">
				<text class="report_name">车身洁净</text>
				<view class="flex_row al_center">
					<!-- <text class="report_value">请选择</text>
					<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons> -->
					<picker mode="selector"  :range="thereany" range-key="text" @change="changeHave($event,3)">
						<text class="report_value" :style="{color:'#333'}">{{cleanbody}}</text>
						<uni-icons type="forward" color="#C5C5C5" class="mg_lt_20"></uni-icons>
					</picker>
				</view>
			</view>
			
			<view class="common_width flex_col" :style="{'backgroundColor':'#fff'}">
				<text class="report_name">说明</text>
				<textarea :maxlength="20" v-model="explain"  placeholder="限制20个字说明" class="mg_tp_20 explain_text" ></textarea>
			</view>
			
		</view>
		
		<view class="two_btn mg_tp_20 flex_row">
			<view v-show="false" class="draft_btn flex_row just_center al_center">
				<text>保存到草稿</text>
			</view>
			<view class="submit_btn flex_row just_center al_center" @tap="submitPost">
				<text>立即提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				section:'',
				plateNumber:'',
				
				// 质量
				rubbishfull:'有',
				rubbish:'有',
				taxevasion:'有',
				dailytransportation:'有',
				cleanbody:'有',
				explain:'',
				
				
				//其他
				pressure:'正常',
				engine:'正常',
				cardoor:'已锁',
				waterTank:'正常',
				engineOil:'正常',
				brake:'正常',
				
				calculate:'',
				refuelingTime:'',
				quantity:'',
				category:null,
				engineOptions:[{text:'正常'},{text:'异常'}],
				cardoorOptions:[{text:'已锁'},{text:'未锁'}],
				thereany:[{text:'有'},{text:'没有'}],
				categorys:[{text:'收运司机'},{text:'清运司机'},{text:'保洁司机'}],
				numList1:[{num:'1次'},{num:'2次'},{num:'3次'},{num:'4次'},{num:'5次'},{num:'6次'}],
				numList2:[{num:'1分'},{num:'2分'},{num:'3分'},{num:'4分'},{num:'5分'},{num:'6分'},{num:'7分'},{num:'8分'},{num:'9分'},{num:'10分'},{num:'11分'},{num:'12分'}],
				taskList:[{startTime:'',endTime:'',startKm:'',endKm:'',barrels:'',amount:''}],
				violations:[{illegalItems:'闯红灯',frequency:'1次',branch:'1分'}],
				traffRules:[{text:'闯红灯'},{text:'超速'},{text:'逆向行驶'},{text:'违停'},{text:'抢人行道'}]
			}
		},
		components:{
			uniNavBar,
			uniIcons
		},
		methods: {
			changeCardoor(e){
				this.cardoor = this.cardoorOptions[e.detail.value].text
			},
			changenormal(e,name){
				switch(name){
					case 0:this.pressure = this.engineOptions[e.detail.value].text; break;
					case 1:this.engine = this.engineOptions[e.detail.value].text; break;
					case 2:this.waterTank = this.engineOptions[e.detail.value].text; break;
					case 3:this.engineOil = this.engineOptions[e.detail.value].text;  break;
					case 4:this.brake = this.engineOptions[e.detail.value].text;  break;
				}
			},
			changeHave(e,name){
				switch(name){
					case 0:this.rubbish = this.thereany[e.detail.value].text; break;
					case 1:this.taxevasion = this.thereany[e.detail.value].text; break;
					case 2:this.dailytransportation = this.thereany[e.detail.value].text; break;
					case 3:this.cleanbody = this.thereany[e.detail.value].text;  break;
					case 4:this.rubbishfull = this.thereany[e.detail.value].text;  break;
				}
			},
			selectCate(e){
				this.category = this.categorys[e.detail.value].text
			},
			changeVal(e,dom,type,index){
				if(type===0){
					this.$set(this.violations[index],dom,this.traffRules[e.detail.value].text)
				}
				if(type===1){
					this.$set(this.violations[index],dom,this.numList1[e.detail.value].num)
				}
				if(type===2){
					this.$set(this.violations[index],dom,this.numList2[e.detail.value].num)
				}
				
			},
			addVoTimes(){
				this.violations.push({illegalItems:'闯红灯',frequency:'1次',branch:'1分'})
			},
			addTimes(){
				this.taskList.push({startTime:'',endTime:'',startKm:'',endKm:'',barrels:'',amount:''})
			},
			deleteTimes(index){
				this.$delete(this.taskList,index)
			},
			deleteviolations(ind){
				this.$delete(this.violations,ind)
			},
			changesTime(e,ind){
				this.$set(this.taskList[ind],'startTime',e.detail.value)
				//
			},
			changeEtime(e,ind){
				this.$set(this.taskList[ind],'endTime',e.detail.value)
				//
			},
			back(){
				this.$utils.navBack()
			},
			submitPost(){
				let month = (new Date().getMonth()+1)/10>=1?(new Date().getMonth()+1):'0'+(new Date().getMonth()+1)
				let year = new Date().getFullYear()
				let date = (new Date().getDate()/10)>=1?new Date().getDate():'0'+new Date().getDate()
				let nowdate = year+'-'+month+'-'+date
				let workTirps = this.taskList.map(item=>{
					return {
						startTime:new Date(nowdate+' '+item.startTime).getTime(),
						endTime:new Date(nowdate+' '+item.endTime).getTime(),
						startMileage:item.startKm,
						endMileage:item.endKm,
						barrels:item.count,
						unit:item.amount
					}
				})
				let data=
					{
					    "healthStatus": "健康",
					    "plateNo": this.plateNumber,
						"createrId": uni.getStorageSync('userInfo').uid,
						"createrName": uni.getStorageSync('userInfo').userName,
						"projectId": "p0001",
					    "safety": {
					        "tirePressure": this.pressure,
					        "engineState": this.engine,
					        "waterTankState": this.waterTank,
					        "engineOilState": this.engineOil,
					        "brakeStopState": this.brake,
					        "carDoorState": this.cardoor,
					        "safeDrive": "正常",
					        "driverSign": "正常"
					    },
					    "workload": {
					        "roadSection": this.section,
					        "vehicleType": this.category,
					        "worktrips": workTirps,
					        "vehicleRefueTime": 1589108754008,
					        "vehicleRefueVolume": this.quantity
					    },
					    "workquality": {
					        "garbageLeak": "15:30",
					        "dailyDelivery": "全部清运完毕",
					        "vehicleClean": "已清"
					    }
					}
				
					this.$utils.http.post('/dailywork/pm/driver/commit',data).then(res=>{
						if(res.code==200){
							uni.showToast({
								icon:'none',
								title:'提交成功',
								duration:1000,
							})
							setTimeout(()=>{
								this.$utils.navBack()
							},1000)
						}
					})
			}
		}
	}
</script>

<style scoped>
@import "@/common/css/main.css";
.off_port{
	width: 750rpx;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	background:#F6F6F6 ;
}
.work_head{
	width:750rpx;
	height:140rpx;
	background:#fff;
}
.head_line{
	width:1px;
	height:44rpx;
	background:#D7D7D7;
}
.head_item text:nth-child(1){
	font-size:30rpx;
	font-weight:500;
	color:#868686;
}
.head_item text:nth-child(2){
	margin-top: 10rpx;
	font-size:34rpx;
	font-weight:bold;
	color:#454545;
}
.status_txt{
	margin-left: 40rpx;
	font-size:32rpx;
	font-weight:500;
	color:#909090;
}
.delete_status_txt{
	margin-right: 40rpx;
	font-size:32rpx;
	font-weight:500;
	color:#FF5454;
}
.health_status{
	width: 750rpx;
	height: 170rpx;
	background: #fff;
	padding-left: 40rpx;
	padding-top: 30rpx;
	font-size: 32rpx;
	box-sizing: border-box;
}
.report_item{
	width: 690rpx;
	height: 120rpx;
	border-bottom: 1px solid #E8E8E8;
}
.report_name{
	font-size: 32rpx;
	color: #2E2D2D;
	font-weight: 500;
}
.report_value{
	font-size: 32rpx;
	color: #909090;
	font-weight: 500;
}
.report_list{
	width: 750rpx;
	background-color: #fff;
}
.two_btn{
	width: 750rpx;
	height: 130rpx;
	padding-top: 40rpx;
	background-color: #fff;
}
.draft_btn{
	margin-left: 34rpx;
	margin-top: 20rpx;
	width:200rpx;
	height:96rpx;
	background:#26AE6C;
	border-radius:10rpx;
	
}
.draft_btn text{
	font-size:32rpx;
	font-weight:bold;
	color:#fff;
}
.submit_btn{
	width:466rpx;
	height:96rpx;
	background:#345AD4;
	border-radius:10rpx;
	margin: 0 auto;
}
.submit_btn text{
	font-size:32rpx;
	font-weight:bold;
	color:#fff;
}
.form_lable{
	width: 200rpx;
}
.report_input{
	font-size: 32rpx;
}
.space_line{
	width:55rpx;
	height:1px;
	background:#D1D1D1;
}
.input_time{
	font-size: 32rpx;
	text-align: center;
}
.add_times{
	width: 750rpx;
	height: 120rpx;
	background-color: #fff;
}
.add_times_txt{
	font-size: 32rpx;
	color: #345AD4;
}
.explain_text{
	font-size: 32rpx;
	height: 120rpx;
}
.time_label{
	font-size: 32rpx;
	color:#909090;
}
.selected_time{
	font-size: 32rpx;
	color:#333;
}
.time_picker{
	flex: 1;
	/* background-color: blue; */
	text-align: center;
}
</style>
